<template>
	<el-dialog title="历史会话记录" :visible="dialogVisible" width="660px" :before-close="handleClose" custom-class="session-history-container">
		<div class="table">
			<el-table :data="sessions" style="width: 100%" border stripe>
				<el-table-column prop="sessionId" label="sessionID" width="150px" align="center"> </el-table-column>
				<el-table-column prop="createdAt" label="通话开始时间" width="180px" align="center"> </el-table-column>
				<el-table-column prop="closedAt" label="通话结束时间" width="180px" align="center"> </el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<span class="button" @click="showDetail(scope.row.sessionId)">会话详情</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-dialog>
</template>

<script>
import { getBizrecordSessions } from '@/api/api.js';
export default {
	components: {},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		handleClose: {
			type: Function,
			default: () => {}
		},
		id: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			sessions: []
		};
	},
	watch: {},
	mounted() {
		this.getBizrecordSessions();
	},

	methods: {
		getBizrecordSessions() {
			getBizrecordSessions(this.id)
				.then(res => {
					if (res.data && res.data.code === 200 && res.data.message) {
						const sessions = res.data.message;
						this.sessions = [];
						sessions.map(item => {
							const { closedAt, createdAt } = item.session;
							item.createdAt = createdAt ? this.$moment(createdAt).format('YYYY-MM-DD HH:mm:ss') : '-';
							item.closedAt = closedAt ? this.$moment(closedAt).format('YYYY-MM-DD HH:mm:ss') : '-';
						});
						this.sessions = [...sessions];
					} else {
						console.error('获取历史会话记录', res.data);
						this.$message.warning('获取历史会话记录失败');
					}
				})
				.catch(err => {
					console.error('获取历史会话记录', err);
					this.$message.warning('获取历史会话记录失败');
				});
		},
		showDetail(sessionId) {
			// 新开页跳转至对应session的会话详情页
			let routerdata = this.$router.resolve({
				name: 'session'
			});
			let newhref = routerdata.href + '?sessionId=' + sessionId + '&uid=' + window.uid;

			window.open(newhref, '_blank');
		}
	}
};
</script>

<style lang="less" scoped>
.session-history-container {
	color: #333333;
	margin-top: 20px;
	height: 100%;

	.button {
		width: 47px;
		height: 13px;
		// font-size: 12px;
		font-weight: 400;
		color: #6384fe;
		line-height: 16px;
		cursor: pointer;
	}
}
</style>
<style lang="less">
.session-history-container {
	.el-table__header {
		// font-size: 13px;
		font-weight: 500;
		color: #676a6c;
		line-height: 16px;
	}
	.cell {
		// font-size: 13px;
		font-weight: 400;
		color: #676a6c;
		line-height: 16px;
	}
}
</style>
